<template>
	<div>
		<el-drawer v-model="deptDrawer" :direction="direction" :before-close="handleCatalogDataClose">
			<template #header>
				<span>{{ state.title }}</span>
			</template>
			<div>
				<el-form ref="catalogDialogFormRef" :rules="rules" :model="state.ruleForm" size="default" label-width="90px">
					<el-row>
						<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
							<el-form-item label="分类名称" prop="catalogName">
								<el-input v-model="state.ruleForm.catalogName" placeholder="请输入分类名称" clearable></el-input>
							</el-form-item>
						</el-col>

						<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
							<el-form-item label="上级目录" prop="parentId">
								<el-cascader
									:options="state.catalogData"
									:props="{ checkStrictly: true, value: 'id', label: 'catalogName', emitPath: false }"
									placeholder="请选择父目录"
									clearable
									class="w100"
									v-model="state.ruleForm.catalogParentId"
								>
									<template #default="{ node, data }">
										<span>{{ data.catalogName }}</span>
										<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
									</template>
								</el-cascader>
							</el-form-item>
						</el-col>

						<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
							<el-form-item label="分类排序" prop="catalogSort">
								<el-input v-model.number="state.ruleForm.catalogSort" placeholder="请输入分类排序" clearable></el-input>
							</el-form-item>
						</el-col>

						<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
							<el-form-item label="分类描述" prop="description">
								<el-input v-model="state.ruleForm.description" type="textarea" placeholder="请输入分类描述" maxlength="150"></el-input>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
			</div>
			<template #footer>
				<div class="dialog-footer">
					<el-button @click="handleCatalogDataClose" size="default">取 消</el-button>
					<el-button type="primary" @click="onSubmit(catalogDialogFormRef)" size="default">{{ state.submitTxt }}</el-button>
				</div>
			</template>
		</el-drawer>
	</div>
</template>

<script setup lang="ts" name="FileCatalog">
import { ref, reactive, nextTick } from 'vue';
import type { FormInstance, FormRules } from 'element-plus';
import { fileApi } from '/@/api/file/index';
import msg from '/@/utils/messageUtils';

const emit = defineEmits(['refreshFileCatalog']);
const deptDrawer = ref(false);
const direction = ref('rtl');
const catalogDialogFormRef = ref();

const state = reactive({
	type: '',
	title: '',
	catalogData: [],
	submitTxt: '',
	ruleForm: {
		catalogName: '',
		id: '',
		catalogParentId: '',
		catalogSort: 0,
		description: '',
	},
});

const rules = reactive<FormRules>({
	catalogName: [{ required: true, message: '分类名称不能为空', trigger: 'blur' }],
	catalogParentId: [{ required: true, message: '父分类不能为空', trigger: 'blur' }],
	catalogSort: [
		{ required: true, message: '分类排序不能为空', trigger: 'blur' },
		{ type: 'number', message: '排序字段必须数字' },
	],
});
const handleCatalogDataClose = () => {
	deptDrawer.value = false;
};

const openDialog = (type: string, row: any) => {
	deptDrawer.value = true;
	if (type === 'edit') {
		state.type = 'edit';
		state.title = '更新分类';
		state.submitTxt = '修改';
		state.ruleForm.id = row.id;
		viewFileCatalog(row.id);
		nextTick(() => {
			catalogDialogFormRef.value.clearValidate();
		});
	} else {
		state.type = 'add';
		state.title = '新增分类';
		state.submitTxt = '新增';
		nextTick(() => {
			catalogDialogFormRef.value.resetFields();
			catalogDialogFormRef.value.clearValidate();
			state.ruleForm.catalogParentId = row.id;
		});
	}
	getCatalogData();
};

const viewFileCatalog = async (id: string) => {
	try {
		const { data } = await fileApi().view_catalog(id);
		state.ruleForm.id = data.id;
		state.ruleForm.catalogName = data.catalogName;
		state.ruleForm.catalogParentId = data.catalogParentId;
		state.ruleForm.catalogSort = data.catalogSort;
		state.ruleForm.description = data.description;
	} catch (error) {
		msg().error('获取文件分类详情失败，请重试.');
	}
};

const getCatalogData = async () => {
	try {
		const { data } = await fileApi().tree_catalog();
		state.catalogData = data;
	} catch (error) {
		msg().error('获取文件分类失败，请重试.');
	}
};

const onSubmit = async (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	await formEl.validate(async (valid) => {
		if (valid) {
			try {
				if (state.type === 'edit') {
					await fileApi().update_catalog(state.ruleForm);
				} else {
					await fileApi().craete_catalog(state.ruleForm);
				}
				msg().success('操作成功');
				handleCatalogDataClose();
				emit('refreshFileCatalog');
			} catch (error) {
				msg().error('操作失败,请重试');
			}
		}
	});
};
// 暴露变量
defineExpose({
	openDialog,
});
</script>

<style scoped lang="scss">
.dialog-footer {
	margin: 15px;
}
</style>
